<template>
  <div class="list">
    <div class="tabs">
      <div
        @click="changeTab(1)"
        :class="[{ tab: true, 'active-tab': tab === 1 }]"
      >
        订单量
      </div>
      <div
        @click="changeTab(2)"
        :class="[{ tab: true, 'active-tab': tab === 2 }]"
      >
        成交金额
      </div>
    </div>
    <div class="time-wrapper">
      <span>刷选时间：</span>
      <span
        style="color: #ff9999; text-decoration: underline"
        @click="show = true"
        >{{ date ? date : "点击选择日期区间" }}</span
      >
      <van-calendar
        v-model="show"
        type="range"
        :show-confirm="false"
        @confirm="onConfirm"
      />
      <van-button
        @click="handleFilter"
        style="margin-left: 0.3rem"
        type="info"
        plain
        size="mini"
      >
        筛选
      </van-button>
    </div>
    <div class="list-wrapper">
      <van-row class="theader">
        <van-col class="list-item list-item-header center" span="6">
          排名
        </van-col>
        <van-col class="list-item list-item-header center" span="9">
          市场人员姓名
        </van-col>
        <van-col class="list-item list-item-header center" span="9">
          {{ tab === 1 ? "成交订单量" : "成交金额（￥）" }}
        </van-col>
      </van-row>
      <div class="tbody" v-if="tab === 1 && list && list.length > 0">
        <van-row v-for="item in list" :key="item.id" class="list-item-wrapper">
          <van-col class="list-item center" span="6">{{ item.sort }}</van-col>
          <van-col class="list-item center" span="9">{{ item.name }}</van-col>
          <van-col class="list-item center" span="9">{{ item.num }}</van-col>
        </van-row>
      </div>
      <div class="tbody" v-if="tab === 2 && list && list.length > 0">
        <van-row v-for="item in list" :key="item.id" class="list-item-wrapper">
          <van-col class="list-item center" span="6">{{ item.sort }}</van-col>
          <van-col class="list-item center" span="9">{{ item.name }}</van-col>
          <van-col class="list-item center" span="9">{{ item.price }}</van-col>
        </van-row>
      </div>
      <template v-if="list && list.length < 0">
        <div class="empty">数据为空~</div>
      </template>
    </div>
    <div class="nav" @click="$router.go(-1)">返回</div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      list: [],
      tab: 1,
      date: "",
      show: false
    };
  },
  mounted() {
    // 模拟数据
    for (let i = 0; i < 20; i++) {
      this.list.push({
        id: i,
        sort: i + 1,
        name: "小明" + i,
        num: Math.round(10000 / (i + 1)),
        price: Math.round(200000 / (i + 1))
      });
    }
    // TODO: 删除模拟数据，请求接口去获取数据
  },
  methods: {
    // 切换 tab
    changeTab(index) {
      // 点击的 tab 为当前激活 tab 时不做任何处理
      if (index === this.tab) return void 0;
      // 否则把当前激活的 tab 换成点击的 tab
      this.tab = index;
      // TODO: 根据不同的 tab 去请求数据
    },
    onConfirm(date) {
      const [start, end] = date;
      this.show = false;
      this.date = `${moment(start).format("YYYY-MM-DD")} - ${moment(end).format(
        "YYYY-MM-DD"
      )}`;
    },
    handleFilter() {}
  }
};
</script>

<style scoped lang="less">
.list {
  background-color: #fcfcfc;
  padding-top: 1px;
  padding-bottom: 0.5rem;
  font-size: 14px;
  .tabs {
    margin: 0.5rem 0 0.3rem 0.15rem;
    font-size: 12px;
    display: flex;
    width: 2.5rem;
    .tab {
      transition: all 0.5s;
      text-align: center;
      height: 0.6rem;
      line-height: 0.6rem;
      width: 50%;
      border: 1px solid #ccc;
    }
    .tab:first-child {
      border-radius: 0.1rem 0 0 0.1rem;
    }
    .tab:last-child {
      border-radius: 0 0.1rem 0.1rem 0;
    }
    .active-tab {
      color: #78a4ff;
      border-color: #78a4ff;
    }
  }
  .time-wrapper {
    display: flex;
    align-items: center;
    margin: 0 0 0.2rem 0.15rem;
    font-size: 0.28rem;
    color: #78a4ff;
  }
  .list-wrapper {
    font-size: 12px;
    // text-align: left;
    padding: 0 0.15rem;
    .tbody {
      height: 9rem;
      overflow-y: auto;
    }
    .empty {
      margin-top: 0.3rem;
      text-align: center;
      color: #999;
    }
    .theader,
    .list-item-wrapper {
      height: 0.8rem;
      padding: 0 0.1rem;
      background-color: #f1f1f1;
    }
    .list-item-wrapper:nth-child(2n + 1) {
      background-color: rgb(228, 237, 250);
    }
    .list-item {
      line-height: 0.8rem;
      color: #555;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .list-item-header {
      color: #999;
      font-weight: bold;
    }
    .center {
      text-align: center;
    }
    .link {
      cursor: pointer;
      color: #3582fb;
    }
  }
  .nav {
    position: fixed;
    bottom: 0;
    right: 0;
    // border-radius: 0.15rem 0 0 0.15rem;
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    background-color: #78a4ff;
    color: #fff;
    font-size: 0.26rem;
  }
}
</style>
